<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>修改密码</title>
  <!--引入vue-->
  <script src="../../js/vue.js"></script>
  <!--引入Element-->
  <script src="../../js/index.js"></script>
  <link rel="stylesheet" href="../../css/index.css">
  <!--引入axios-->
  <script src="../../js/axios.min.js"></script>
  <script src="../../js/request.js"></script>
</head>
<body>
<div id="app">
  <div style="width: 300px; margin: 120px auto;">
    <el-form ref="formRef" :model="formData" label-width="80px" :rules="rules">

      <el-form-item label="原密码" prop="oldPassword">
        <el-input type="password" v-model="formData.oldPassword"></el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="formData.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="newPassword2">
        <el-input type="password" v-model="formData.newPassword2"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

  </div>

</div>
<script>
  //  公共校验规则
  const passwordRules = [
    {required: true, message: '密码不能为空', trigger: 'blur'},
    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'},
  ];
  let app = new Vue({
    el: '#app',
    data() {
      return {
        formData: {
          oldPassword: '',
          newPassword: '',
          newPassword2: '',
        },
        // 校验
        rules: {
          oldPassword: [
            // {required: true, message: '请输入旧密码', trigger: 'blur'},
            // {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
            // ES6 中的扩展运算符 将数组 passwordRules 中的所有元素展开，并将它们合并到新的数组中
            ...passwordRules
          ],
          newPassword: [
            ...passwordRules,
            {
              validator: (rule, value, callback) => {
                if (value === this.formData.oldPassword) {
                  callback(new Error('新密码不能与旧密码相同'))
                } else {
                  callback()
                }
              }, trigger: 'blur'
            }
          ],
          newPassword2: [
            ...passwordRules,
            {
              validator: (rule, value, callback) => {
                if (value !== this.formData.newPassword) {
                  callback(new Error('两次输入密码不一致'))
                } else {
                  callback()
                }
              }, trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      // 提交修改密码
      submit() {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            console.log('校验成功')
            console.log(this.formData)
            $axios.post('/user?m=rePassword', {
              oldPassword: this.formData.oldPassword,
              newPassword: this.formData.newPassword
            }).then(res => {
              console.log(res)
              if (res.code === 1) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        })
        //重置表单校验
        this.$refs.formRef.resetFields();
        return false
      },
      reset() {
        // 重置表单
        this.formData = {
          oldPassword: '',
          newPassword: '',
          newPassword2: '',
        }
      }
    }
  })
</script>
</body>
</html>